<template>
  <div>
    <el-container>
      <el-header>小U后台管理系统
        <div class="user">
          当前用户：<span>{{username}}</span>
          <el-button @click="logout" size='small' type='danger'>退出</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="220px">
          <v-nav></v-nav>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import vNav from "../components/vNav";
export default {
  data(){
    return{
      username:''
    }
  },
  mounted() {
    //取出当前的用户
    this.username = JSON.parse(sessionStorage.getItem('userinfo')).username
  },
  methods:{
    logout(){
      //一、清空你的存储内容(在这是重新触发行动)
      this.$store.dispatch('changeUser',false)
      this.$router.push('/login')
    }
  },
  components: {
    vNav
  }
};
</script>

<style  scoped>
.el-header {
  background: lightblue;
}
.user{
  position: absolute;
  right: 50px;
}
</style>
